<page-header model="ctrl.navModel"></page-header>

<div class="page-container page-body">
  <react-profile-wrapper></react-profile-wrapper>

  <h3 class="page-heading" ng-show="ctrl.showTeamsList">Teams</h3>
  <div class="gf-form-group" ng-show="ctrl.showTeamsList">
    <table class="filter-table form-inline">
      <thead>
        <tr>
          <th></th>
          <th>Name</th>
          <th>Email</th>
          <th>Members</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="team in ctrl.teams">
          <td class="width-4 text-center"><img class="filter-table__avatar" ng-src="{{ team.avatarUrl }}" /></td>
          <td>{{ team.name }}</td>
          <td>{{ team.email }}</td>
          <td>{{ team.memberCount }}</td>
        </tr>
      </tbody>
    </table>
  </div>

  <h3 class="page-heading" ng-show="ctrl.showOrgsList">Organizations</h3>
  <div class="gf-form-group" ng-show="ctrl.showOrgsList">
    <table class="filter-table form-inline">
      <thead>
        <tr>
          <th>Name</th>
          <th>Role</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="org in ctrl.orgs">
          <td>{{ org.name }}</td>
          <td>{{ org.role }}</td>
          <td class="text-right">
            <span class="btn btn-primary btn-small" ng-show="org.orgId === contextSrv.user.orgId">
              Current
            </span>
            <a
              ng-click="ctrl.setUsingOrg(org)"
              class="btn btn-inverse btn-small"
              ng-show="org.orgId !== contextSrv.user.orgId"
            >
              Select
            </a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <h3 class="page-heading">Sessions</h3>
  <div class="gf-form-group">
    <table class="filter-table form-inline">
      <thead>
        <tr>
          <th>Last seen</th>
          <th>Logged on</th>
          <th>IP address</th>
          <th>Browser &amp; OS</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="session in ctrl.sessions">
          <td ng-if="session.isActive">Now</td>
          <td ng-if="!session.isActive">{{ session.seenAt }}</td>
          <td>{{ session.createdAt }}</td>
          <td>{{ session.clientIp }}</td>
          <td>{{ session.browser }} on {{ session.os }} {{ session.osVersion }}</td>
          <td>
            <button class="btn btn-danger btn-small" ng-click="ctrl.revokeUserSession(session.id)">
              <i class="fa fa-power-off"></i>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
